<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<link rel="stylesheet" href="css/swiper-3.3.1.min.css">
	<link rel="stylesheet" href="css/animate.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script src="js/swiper-3.3.1.min.js"></script>
	<script src="js/swiper.animate1.0.2.min.js"></script>
	<title></title>
</head>
<body>
	<div id="music">
		<img src="img/music.png" id="img" style="width: 100%;height: 100%;">
		<audio src="music.mp3" id="audio" loop="loop" autoplay="autoplay"></audio>
	</div>
	<div id="right"></div>
	<div class="swiper-container">
	    <div class="swiper-wrapper">
	        <div class="swiper-slide slide1">
	        	<img class="ani talk1" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.7s" src="img/talk1.png"/>
	        	<img class="ani talk1-1" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1s" src="img/talk1-1.png" />
	        	<img class="ani talk_shadow" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.7s" src="img/talk_shadow.png" />
	        	<img class="ani talk1-2" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2s" src="img/talk1-2.png" />
	        </div>
	        <div class="swiper-slide slide2">
	        	<img class="ani talk1" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.7s" src="img/talk1.png"/>
	        	<img class="ani talk2-1" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1s" src="img/talk2-1.png" />
	        	<img class="ani talk_shadow" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.7s" src="img/talk_shadow.png" />
	        	<img class="ani talk2-2" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2s" src="img/talk2-2.png" />
	        </div>
	        <div class="swiper-slide slide3">
	        	<img class="ani talk1" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.7s" src="img/talk1.png"/>
	        	<img class="ani talk3-1" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1s" src="img/talk3-1.png" />
	        	<img class="ani talk_shadow" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.7s" src="img/talk_shadow.png" />
	        	<img class="ani talk3-2" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2s" src="img/talk3-2.png" />
	        </div>
	        <div class="swiper-slide slide4">
	        	<img class="ani talk1" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.7s" src="img/talk1.png"/>
	        	<img class="ani talk4-1" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1s" src="img/talk4-1.png" />
	        	<img class="ani talk_shadow" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.7s" src="img/talk_shadow.png" />
	        	<img class="ani talk4-2" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2s" src="img/talk4-2.png" />
	        </div>
	        <div class="swiper-slide slide5">
	        	<img class="ani talk1" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="0.7s" src="img/talk1.png"/>
	        	<img class="ani talk5-1" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1s" src="img/talk5-1.png" />
	        	<img class="ani talk_shadow" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.7s" src="img/talk_shadow.png" />
	        	<img class="ani talk5-2" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2s" src="img/talk5-2.png" />
	        </div>
	        <div class="swiper-slide slide6">
	        	<img class="ani talk6-1" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="0.7s" src="img/talk6-1.png" />
	        	<img class="ani talk6-2" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1s" src="img/talk6-2.png" />
	        	<img class="ani talk6-3" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1.7s" src="img/talk6-3.png" />
	        	<div class="ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="2.3s">
	        		<img class="ani talk6-4" swiper-animate-effect="tada" swiper-animate-duration="1s" swiper-animate-delay="3s" src="img/talk6-4.png" />
	        	</div>
	        </div>
	        <div class="swiper-slide slide7">
	        	<img class="ani talk7-1" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="1s" src="img/talk7-1.png" />
	        	<img class="ani talk2" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.7s" src="img/talk2.png"/>
	        	<img class="ani talk7-2" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2s" src="img/talk7-2.png" />
	        </div>
	        <div class="swiper-slide slide8">
	        	<img class="ani talk8-1" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="1s" src="img/talk8-1.png" />
	        	<img class="ani talk2" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.7s" src="img/talk2.png"/>
	        	<img class="ani talk8-2" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2s" src="img/talk8-2.png" />
	        </div>
	        <div class="swiper-slide slide9">
	        	<img class="ani talk9-1" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="1s" src="img/talk9-1.png" />
	        	<img class="ani talk2" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.7s" src="img/talk2.png"/>
	        	<img class="ani talk9-2" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2s" src="img/talk9-2.png" />
	        </div>
	        <div class="swiper-slide slide10">
	        	<img class="ani talk10-1" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="1s" src="img/talk10-1.png" />
	        	<img class="ani talk2_10" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="1.7s" src="img/talk2.png"/>
	        	<img class="ani talk10-2" swiper-animate-effect="fadeIn" swiper-animate-duration="1s" swiper-animate-delay="2s" src="img/talk10-2.png" />
	        </div>
	        <div class="swiper-slide slide11">
	        	<img class="ani talk11-1" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="2s" src="img/talk11-1.png" />
	        	<img class="ani talk11-2" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="2.5s" src="img/talk11-2.png" />
	        	<img class="ani talk11-3" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="3s" src="img/talk11-3.png" />
	        	<img class="ani talk11-4" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="3.5s" src="img/talk11-4.png" />
	        	<img class="ani talk11-5" swiper-animate-effect="rollIn" swiper-animate-duration="1s" swiper-animate-delay="1s" src="img/talk11-5.png" />
	        	<img class="ani talk11-6" swiper-animate-effect="rollIn" swiper-animate-duration="1s" swiper-animate-delay="2s" src="img/talk11-6.png" />
	        	<img class="ani talk11-7" swiper-animate-effect="rollIn" swiper-animate-duration="1s" swiper-animate-delay="3s" src="img/talk11-7.png" />
	        	<img class="ani talk11-8" swiper-animate-effect="rollIn" swiper-animate-duration="1s" swiper-animate-delay="4s" src="img/talk11-8.png" />
	       		<img class="ani talk11-9" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="5s" src="img/talk11-9.png" />
	        </div>
	        <div class="swiper-slide slide12">
	        	<img class="ani talk12-1" swiper-animate-effect="zoomInDown" swiper-animate-duration="1s" swiper-animate-delay="1s" src="img/talk12-1.png" />
	        	<img class="ani talk12-2" swiper-animate-effect="zoomInDown" swiper-animate-duration="1s" swiper-animate-delay="1s" src="img/talk12-2.png" />
	        </div>
	        <div class="swiper-slide slide13">
	        	<p class="ani" swiper-animate-effect="flipInX" swiper-animate-duration="1s" swiper-animate-delay="0.5s">中秋了——回家看一趟爸妈</p>
	        	<div class="ani shadow" swiper-animate-effect="bounceInUp" swiper-animate-duration="2s" swiper-animate-delay="1.3s" >
	        		<img src="img/talk13.jpg" class="talk13"/>
	        	</div>
	        </div>
	    </div>
	</div>
</body>
<script>     
  var mySwiper = new Swiper ('.swiper-container', {
//	水平滑动
    direction: 'horizontal',
    loop:false,
    grabCursor : true,
	mousewheelControl : true,
	effect : 'coverflow',
	slidesPerView: 1,
	centeredSlides: true,
	coverflow: {
        rotate: 30,
        stretch: 10,
        depth: 60,
        modifier: 2,
        slideShadows : true
    },
	onInit: function(swiper){
    swiperAnimateCache(swiper); //隐藏动画元素 
    swiperAnimate(swiper); //初始化完成开始动画
	}, 
	onSlideChangeEnd: function(swiper){ 
    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
	} 
  })
  	var music=document.getElementById("music");
  	var audio=document.getElementById("audio");
  	var img=document.getElementById("img");
  	var right=document.getElementById("right");
  	var a=0; 
	function run (){
		a++;
		music.style.transform="rotate("+a+"deg)";
	}timer=setInterval(run,5);
	var c=0;
	music.onclick=function(){
		if(c==0){
			audio.pause();
			img.setAttribute("src","img/music_stop.png");
			c=1;
		}else{
			audio.play();
			img.setAttribute("src","img/music.png");
			c=0;
		}
	}
	var b=3;
	function run1(){
		b=b+0.2;
		if(b>=6){
			b=3;
			return;
		}
		right.style.right=b+"%";
	}
	timer1=setInterval(run1,50);
</script>
</html>
